<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WMTS-3857</title>
    <!-- 引入OpenLayers库 -->
    <link rel="stylesheet" href="https://data.sunbt.ltd/lib/ol/v6.15.1/css/ol.css" type="text/css">
    <script src="https://data.sunbt.ltd/lib/ol/v6.15.1/build/ol.js"></script>
</head>
<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }

    html, body, #map {
        width: 100%;
        height: 100%;
    }
</style>
<body>
<div id="map" class="map"></div>

<script>
    // 首先设置好WMTS瓦片地图的瓦片坐标系
    let projection = ol.proj.get('EPSG:900913');          // 获取web墨卡托投影坐标系
    let projectionExtent = projection.getExtent();      // web墨卡托投影坐标系的四至范围
    let width = ol.extent.getWidth(projectionExtent);   // web墨卡托投影坐标系的水平宽度，单位米
    let resolutions = [];                               // 瓦片地图分辨率
    let matrixIds = [];                                  //矩阵ID
    for (let z = 0; z < 20; z++) {
        resolutions[z] = width / (256 * Math.pow(2, z));
        matrixIds[z] = "EPSG:900913:" + z;              // 注意这里的matrixId的格式为EPSG:900913:z
    }
    let wmtsTileGrid = new ol.tilegrid.WMTS({
        origin: ol.extent.getTopLeft(projectionExtent), // 原点（左上角）
        resolutions: resolutions,                       // 瓦片地图分辨率
        matrixIds: matrixIds                            // 矩阵ID，就是瓦片坐标系z维度各个层级的标识
    });

    // WMTS数据源与地图
    let wmtsSource = new ol.source.WMTS({
        url: "http://localhost:40002/bis-product-images/wmts",
        layer: "e3edcaab-8b79-48a5-bda5-ad45a56af91c",        // 对应的图层
        matrixSet: 'EPSG:900913',           // 投影坐标系参数矩阵集
        format: 'image/png',                // 图片格式
        projection: projection,             // 投影坐标系
        // 投影坐标系
        tileGrid: wmtsTileGrid
    });
    // let wmtsSource = new ol.source.WMTS({
    //     url: "http://localhost:40002/bis-product-images/wmts",
    //     layer: "e3edcaab-8b79-48a5-bda5-ad45a56af91c",        // 对应的图层
    //     matrixSet: 'EPSG:900913',           // 投影坐标系参数矩阵集
    //     format: 'image/png',                // 图片格式
    //     projection: projection,             // 投影坐标系
    //     // 投影坐标系
    //     tileGrid: wmtsTileGrid
    // });
    let wmtsLayer = new ol.layer.Tile({
        source: wmtsSource
    });

    // 首先，我们创建一个数组包含所有的服务器名：
    const tdtServers = ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'];

    // 接着，我们定义一个函数，用于返回一个随机的服务器名：
    function getRandomTdtServer() {
        const randomIndex = Math.floor(Math.random() * tdtServers.length);
        return tdtServers[randomIndex];
    }

    // 然后，在创建WMTS数据源时，我们使用这个函数：
    let tdtWmtsSource = new ol.source.WMTS({
        url: `http://${getRandomTdtServer()}.tianditu.gov.cn/img_w/wmts?tk=cfafaa0d269a0e29688c4482cfae7c64`,  // 使用动态的天地图服务器
        layer: 'img',
        version: '1.0.0',
        matrixSet: 'w',
        format: 'tiles',
        projection: projection,
        requestEncoding: 'KVP',
        style: 'default',
        tileGrid: wmtsTileGrid
    });

    let tdtWmtsLayer = new ol.layer.Tile({
        source: tdtWmtsSource
    });

    let map = new ol.Map({
        target: 'map',
        layers: [
            // new ol.layer.Tile({
            //     source: new ol.source.Stamen({
            //         layer: 'terrain'
            //     })
            // }),
            tdtWmtsLayer,
            wmtsLayer
        ],
        view: new ol.View({
            center: ol.proj.transform([ 119.4645, 32.9708], 'EPSG:4326', 'EPSG:3857'),
            zoom: 5
        })
    });
</script>
</body>
</html>
